<script setup lang="ts">
import { SearchTable, SubmitBtn } from "@fl/components";
import { useMessage } from "@fl/hooks/web/use-message"; // 确认框
import { cloneDeep } from "lodash-es";
import {
    useReformImportResultProcess,
    useImportUnitDataResult,
    useImportUnitData,
} from "@fl/api/elevator-api";
const show = defineModel("show");
const records = ref<any>();

const tablePage = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
});
const params = computed(() => ({
    pageIndex: tablePage.currentPage,
    pageSize: tablePage.pageSize,
    orderBy: "create_time", // 根据创建时间排序
    orderType: "desc", // 降序
}));
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.currentPage = currentPage;
    tablePage.pageSize = pageSize;
};
const { data, isLoading, refetch } = useImportUnitDataResult(params);
const gridOptions = reactive<VxeGridProps>({
    columns: [
        { title: "序号", type: "seq", width: 60 },
        { field: "createBy", title: "操作人" },
        { field: "createTime", title: "操作时间" },
        { field: "successCount", title: "成功条数" },
        { field: "failCount", title: "失败条数" },
        { field: "processValue", slots: { default: "processValue" }, title: "导入状态" },
        { slots: { default: "operate" }, title: "操作", width: 150 },
    ],
});
const timer = ref();
const refreshCount = ref(0);
watchEffect(() => {
    if (data.value) {
        records.value = cloneDeep(data.value.records);
        tablePage.total = data.value.total!;
        const unFinished = data.value.records.filter((i) => i.processValue < 100);
        if (unFinished.length>0) {
            timer.value = setTimeout(() => {
                refreshCount.value++;
                refetch();
            }, 3000);
        } else {
            clearTimeout(timer.value);
            timer.value = null;
        }
    }
});
const excelModelUrl = ref(
    "https://public-obs-cdn.anjulian.com.cn/2025-06-03/7764d3e6-f468-4129-837a-340815411d45.xlsx"
);
function downloadExcel(downLoadUrl) {
    window.open(downLoadUrl);
}
const { isPending: ImportDataLoading, mutate: ImportDataMutate } = useImportUnitData();
async function uploadFile(uploadFile) {
    // 创建 FormData 对象
    const param = new FormData();
    param.append("file", uploadFile.file);

    ImportDataMutate(param as any, {
        onSuccess: (res: any) => {
            ElMessage.success("操作成功");
        },
    });
}
</script>

<template>
    <ElDialog v-model="show" title="导入单元" width="70%" :destroy-on-close="true">
        <SearchTable
            v-bind="gridOptions"
            v-model:pager="tablePage"
            :loading="isLoading"
            :data="records"
            @page-change="handlePageChange"
        >
            <template #toolbar_buttons>
                <ElUpload
                    ref="uploadRef"
                    :show-file-list="false"
                    :http-request="uploadFile"
                >
                    <SubmitBtn type="primary" :loading="ImportDataLoading"
                        >上传文件</SubmitBtn
                    >
                </ElUpload>
                <ElButton
                    type="primary"
                    @click="downloadExcel(excelModelUrl)"
                    class="ml-16"
                    >下载模板</ElButton
                >
            </template>
            <template #processValue="{ row }"> {{ row.processValue }}% </template>
            <template #operate="{ row }">
                <ElButton type="primary" text @click="downloadExcel(row.resultUrl)"
                    >下载明细</ElButton
                >
            </template>
        </SearchTable>
    </ElDialog>
</template>
